<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>KityMinder Example</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" >
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" href="src/kityminder.css">
    <link rel="stylesheet" href="dist/hotbox.css">

    <style type="text/css">
        #minder-view {
            position: absolute;
            border: 1px solid #ccc;
            left: 10px;
            top: 10px;
            bottom: 10px;
            right: 10px;
        }
    </style>

    <script type="text/javascript" src="node_modules/kity/dist/kity.min.js"></script>
</head>
<body>
    <div id="minder-view">
    </div>
    <script id="minder-data" type="application/kityminder" minder-data-type="json">
        {
            "data": {
                "text": "鱼骨图"
            },
            "children": [
                { "data": { "text": "特性1","type":1} },
                { "data": { "text": "特性2","type":1 } },
                { "data": { "text": "特性3","type":1 } },
                { "data": { "text": "人" ,"type":2} },
                { "data": { "text": "机" ,"type":2} },
                { "data": { "text": "料" ,"type":2} },
                { "data": { "text": "法" ,"type":2} },
                { "data": { "text": "环" ,"type":2} },
                { "data": { "text": "测" ,"type":2} }
            ]
        }
    </script>

</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="dist/kityminder.core.js"></script>
<script type="text/javascript" src="dist/hotbox.min.js"></script>
<script type="text/javascript">
    var fsm = {
        hotbox_state : "normal"
    };

    var minder = new kityminder.Minder({
	    renderTo: '#minder-view'
    });
    minder.importData("json",  document.querySelector("#minder-data").textContent);
    minder.on("dblclick", function() {
        console.log("双击");
    });

    var hotbox = new HotBox('#minder-view');

    hotbox.hintDeactiveMainState = true;
    hotbox.openOnContextMenu = true;

    var main = hotbox.state('main');

    main.button({
        position: 'center',
        label: '编辑',
        key: 'F2',
        action: function() {
            alert("编辑");
         }
    });

    var ringButtons = '删除:Alt+Up|内部:Tab|外部:Alt+Down|B:Delete|A:Delete'.split('|');
    ringButtons.forEach(function(button) {
        main.button({
            position: 'ring',
            label: button.split(':')[0],
            key: button.split(':')[1]
        });
    });
    
    let container = document.getElementById("minder-view");

    //////////////////////////////////////////////
    /// 右键呼出热盒
    /// 判断的标准是：按下的位置和结束的位置一致
    //////////////////////////////////////////////
    var downX, downY;
    var MOUSE_RB = 2;
    // 右键
    container.addEventListener("mousedown", function(e) {
        if (e.button == MOUSE_RB) {
            e.preventDefault();
        }
        if (fsm.hotbox_state == "hotbox") {
            hotbox.active("idle");
            fsm.hotbox_state = "normal";
        } else if (fsm.hotbox_state == "normal" && e.button == MOUSE_RB) {
            downX = e.clientX;
            downY = e.clientY;
        }
    }, false);
    container.addEventListener("mousewheel", function(e) {
        if (fsm.hotbox_state == "hotbox") {
            hotbox.active("idle");
            fsm.hotbox_state = "normal";
        }
    }, false);
    container.addEventListener("contextmenu", function(e) {
        e.preventDefault();
    });
    container.addEventListener("mouseup", function(e) {
        if (fsm.hotbox_state != "normal") {
            return;
        }
        if (e.button != MOUSE_RB || e.clientX != downX || e.clientY != downY) {
            return;
        }
        if (!minder.getSelectedNode()) {
            return;
        }
        hotbox.active("main", { x: downX, y: downY })
        fsm.hotbox_state = "hotbox"
    }, false);
    // 阻止热盒事件冒泡，在热盒正确执行前导致热盒关闭
    hotbox.$element.addEventListener("mousedown", function(e) {
        e.stopPropagation();
    });

</script>

</html>
